<template>
  <div class="hello">
  	<div class="top">
  		
		<el-menu 
		:default-active="defaultPath"
		:router="true" 
		class="el-menu-demo" 
		mode="horizontal" 
		@select="handleSelect"
		active-text-color="#22ac38">

			<el-menu-item index=""><img src="../assets/img/Group2x.png"></el-menu-item>
			<el-menu-item index="" style="color: gainsboro;"> |</el-menu-item>
			<el-menu-item index="" style="font-size: 20px; margin-right: 200px;"> 商户平台</el-menu-item>
  			<el-menu-item index="/">首页</el-menu-item>
  			<el-menu-item index="/DealCenter" >交易中心</el-menu-item>
  			<el-menu-item index="/CounterCenter">账户中心</el-menu-item>
  			<el-menu-item index="">营销中心</el-menu-item>
  			<el-menu-item index="">产品中心</el-menu-item>
  			<el-menu-item index="">数据中心</el-menu-item>
  		</el-menu>	
  	</div>
	<router-view>
		
	</router-view>	

  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
			defaultPath:'/',
			arr:['/','/DealCenter','/CounterCenter']
		}
  },
  methods:{
	  handleSelect(){
		  
	  },
  },
  watch:{
	  '$route.path':{
		  handler(val){
			  if(this.arr.indexOf(val)>0){
				this.defaultPath=val;
			  }
		
		  },
		  immediate:true,
	  }
  }
  

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello{
	background-color: #FAFBFC;
}
.el-menu{
	height:90px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.el-menu-item{
	font-size: 16px;
	
}
.top img{
	height: 33px;
}
.top-left{
	font-size: 16px;
}

/* .container{
	margin-top: 30px;
	display: flex;
	justify-content: center;
}
.container-left{
	width:854px;
	height: 769px;
	border: #e7eaf0 1px solid;
	background-color: #ffffff;
	margin-right: 4px;
	display: flex;
	align-items: center;
	flex-direction: column;
}
.pies1{
	width: 94%;
	height: 106px;
	display: flex;
	align-items: center;
	border-bottom: 1px #e7eaf0 solid;

}
.bill{
	border: #e7eaf0 solid 1px;
	height: 31px;
	background-color:#FAFBFC; 
	margin-left: 9px;
	line-height: 31px;
}
.pies1 :nth-child(1){

	width: 31px;
	height: 31px;

}
.pies1 :nth-child(3){

	width: 59px;
	height: 59px;
	margin-left: 628px;
	

}
.pies2{
	display: flex;
	align-items: center;	
	border-bottom: 1px #e7eaf0 solid;
	height: 370px;
	
}
.pies2 img{
	margin-top: 30px;
	height: 270px;
}

.pies3{
	width: 800px;
}
.pies3 img{
	height: 204px;
	width: 800px;
}
.el-carousel img{
margin-top:40px;
}

.container-right{
	width:318px;
	height: 769px;
	border: #E7EAF0 1px solid;
	background-color: #ffffff;
	margin-left: 4px;
	font-size: 14px;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: 500;
	color: #727272;
	/* line-height: 17px; */


.section-one{
	border-bottom: 3px #e7eaf0 solid;
	height: 303px;
}
.sc1{
	width: 253px;
	margin-left: 25px;
	margin-top: 40px;
}
.sc1 p{
	display: flex;
	margin-top:17px;
	line-height: 17px;
	font-weight: 500;
}

.section-two{
	border-bottom: 3px #e7eaf0 solid;
	height: 303px;
}




</style>
